<template>
	<view class="container">
		<top-back-navbar position="fixed" :title="pageInfos.nvaTitle" background="#001b4d" color="#ffff"></top-back-navbar>
		<view class="big_title">{{pageInfos.nvaTitle}}</view>
		<view class="cz-box">
			<view class="cz-number">{{pageInfos.nvaTitle}}来源</view>
			<view class="cz-text-group">
				<view class="cz-text-left cz-text-indent">小贝辅导及时康复科打开房间看电视剧开发商肯德基</view>
				<view class="cz-text-img-group">
					<image :src="pageInfos.icon"></image>
				</view>
			</view>
			<view class="cz-number">{{pageInfos.nvaTitle}}价值</view>
			<view class="cz-text">小贝辅导及时康复科打开房间看电视剧开发商肯德基</view>
		</view>
		<view class="gj-group">
			<view class="gj-items" v-for="(item,index) in pageInfos.gjList" :key="index">
				<view class="gj-items-title">{{item.name}}</view> 
				<view class="gj-items-number">{{item.num}}</view>
			</view>
		</view>
		<view class="big_title">信息展示</view>
		<view>
			<block v-for="(item,index) in res" :key="index">
				<view class="cz-list-cell" hover-class="uni-list-cell-hover">
					<view class="cz-triplex-list">
						<text class="cz-name">{{item.pay_info}}</text>
						<text class="cz-time">{{item.time}}</text>
						<text class="cz-jine">¥{{item.money}}</text>
					</view>
				</view>
			</block>
		</view>
		<view v-if="res.length == 0" style="padding-top: 300upx;">
			<image src="/static/searchlist.png" mode=""
				style="display: block;margin: 0 auto;width: 240upx;height: 240upx;"></image>
			<view style="text-align: center;color: #999;">暂时没有任何记录</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '../../components/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				res: [],
				cointitle: ' ',
				index: 2,
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				systemInfo: {},
				load: 0,
				openid: '',
				userInfo: '',
				pageTyep:'',
				pageInfos:{
					nvaTitle:'',
					gjList:[],
					icon:''
				},
				pageTypeList:{
					'xb':{
						nvaTitle:'小贝',
						gjList:[
							{name:'待释放股值',num:200},
							{name:'已释放股值',num:200}
						],
						icon:'/static/images/home/lanse_icon.png'
					},
					'xfz':{
						nvaTitle:'消费券',
						gjList:[
							{name:'待释放股值',num:200},
							{name:'已释放股值',num:200}
						],
						icon:'/static/images/home/lanse_icon.png'
					},
					'gq':{
						nvaTitle:'股值',
						gjList:[
							{name:'待释放股值',num:200},
							{name:'已释放股值',num:200}
						],
						icon:'/static/images/home/lanse_icon.png'
					}
				}
			};
		},
		onLoad: function(e) {
			this.pageTyep=e.type;
			this.pageInfos=this.pageTypeList[e.type];
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
					this.creditAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods: {
			creditAjax() {
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1',
					method: 'POST',
					data: {
						'openid': this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						this.userInfo = res.data
					},
					fail: () => {},
					complete: () => {}
				});
			},
			setAjax() {
				var data = {
					'openid': this.openid,
				}
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.recharge_list&app=1',
					method: 'POST',
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res)
						this.res = res.data.list
					},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		onPullDownRefresh() {
			this.setAjax();
		},
		onReachBottom() {
			if (this.loadingType !== 0) {
				return;
			}
			this.loadingType = 1;
			uni.request({
				url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.log.get_list&app=1&page=' +
					this.index,
				method: 'POST',
				data: {
					'openid': this.openid
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					if (res.data.result.list.length == 0) {
						this.loadingType = 2;
						return;
					}
					this.res = this.res.concat(res.data.result.list)
					this.loadingType = 0;
					this.index = this.index + 1;
				},
				fail: () => {},
				complete: () => {}
			});

		},
	}
</script>

<style lang="scss">
	.status {
		width: 100%;
		font-size: 24upx;
		background: #e0e0e0;
		text-align: center;
		color: #fff;
		margin-top: 21upx;
	}

	page {
		background-color: #f2f5fa;
		box-sizing: border-box;
	}

	.container {
		padding: 0 30rpx 30rpx 30rpx;
		height: 100%;
	}

	.big_title {
		font-size: 36rpx;
		color: #1e1310;
		padding: 20rpx 30rpx 10rpx 0;
	}
	
	.gj-group{
		padding:30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.gj-items{
			width: 48%;
			padding: 40rpx;
			box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);
			border-radius: 20rpx;
			background-color: #fff;
		} 
		.gj-items-title {
			font-size: 30rpx;
		}
		.gj-items-number{
			font-size: 40rpx;
			color:#c20000;
			font-weight: bold;
		}
	}

	.cz-box {
		border-radius: 20rpx;
		padding: 30rpx 46rpx;
		background: #243b67;
		.cz-number {
			width: 160rpx;
			height: 48rpx;
			line-height: 44rpx;
			font-size: 24rpx;
			color:#ffffff;
			font-weight: bold;
			text-align: center;
			background-color: #929db3;
			border-radius: 4px;
			border:1px solid #ffffff;
		}
		.cz-text {
			font-size: 26rpx;
			line-height: 42rpx;
			color: #fff;
			padding:10rpx 0;
		}
		.cz-text-indent{
			text-indent: 48rpx;
		}
		.cz-text-group{ 
			display: flex;
		}
		.cz-text-left{
			font-size: 26rpx;
			line-height: 42rpx;
			color: #fff;
			flex:1;
			padding:10rpx 0;
		}
		.cz-text-img-group{
			display: flex;
			justify-content: center;
			padding-left:40rpx;
			image{
				width: 170rpx;
				height: 170rpx;
			}
		}
	}

	.cz-list-cell {
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
		padding: 20rpx 30rpx;
		margin-bottom: 30rpx;
		background-color: #fff;

		.cz-triplex-list {
			height: 50rpx;
			display: flex;
			align-items: center;
		}

		.cz-name {
			font-size: 28rpx;
			font-weight: 600;
			color: #1e1310;
			width: 45%;
		}

		.cz-jine {
			font-size: 28rpx;
			font-weight: 600;
			color: #c30004;
			width: 10%;
			text-align: right;
		}
		.cz-time{
			font-size: 24rpx;
			color: #888889;
			width: 45%;
			text-align: right;
		}
	}
</style>
